<template>
	<view class="contentLogin">
		<!-- 		<image referrerPolicy='no-referrer' class="loginBg"
			src="https://images.cnblogs.com/cnblogs_com/tcz1018/1766176/o_221109040124_bg1.png" mode="scaleToFill">
		</image> -->
		<view class="iconContent">
	<image src="/static/login.png"></image>
		</view>
		<view class="Loginbtn">
			<u-button v-if="checked.length == 0" shape="circle" @click="getePhoneAgree" iconColor="color:#1BAC87;"
				color="linear-gradient(136deg, #F5B834 0%, #FC6F26 100%)" text="授权手机号登录">
			</u-button>
			<u-button v-else open-type="getPhoneNumber" shape="circle" @getphonenumber="getPhoneNumber"
				iconColor="color:#1BAC87;" color="linear-gradient(136deg, #F5B834 0%, #FC6F26 100%)" text="授权手机号登录">
			</u-button>
		</view>

		<view style="width: 100%;display: flex;justify-content: center;position: fixed;bottom: 30px;">
			<u-checkbox-group v-model="checked">
				<u-checkbox shape="circle" name="agree"></u-checkbox>
			</u-checkbox-group>
			阅读用户<view class="agree" @click="lookAgree">隐私协议</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				checked: []
			}
		},
		onLoad() {
			let that = this
			uni.login({
				success: function(res) {
					that.code = res.code
					console.log(res.code)
				},
				fail: function(params) {
					ss
					console.log(params);
				}
			});
		},
		methods: {
			lookAgree: function() {
				try {
					uni.navigateTo({
						url: '/pages/login/agree',
					})
				} catch (e) {
					// error
				}
			},
			getePhoneAgree: function(e) {
				let that = this;

				uni.showModal({
					title: "提示",
					content: "请同意用户协议",
					confirmText: "确定",
					cancelText: "取消",
					confirmColor: "#000",
					success: function(res) {
						if (res.confirm) {
							that.checked = ['agree']
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					},
				})
			},
			getPhoneNumber: function(e) {
				const {
					encryptedData,
					iv
				} = e.detail;
				
				let that = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$httpReq.wxLogin({
						code: this.code,
						encryptedData: encryptedData,
						iv: iv
					}).then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.setStorageSync('token', res.data)
							uni.showToast({
								icon: 'success',
								title: '登录成功',
							})
							try {
								uni.switchTab({
									url: '/pages/index/index',
								})
							} catch (e) {
								// error
							}

						} else {
							uni.showToast({
								icon: 'error',
								title: '登录失败',
							})
						}
					})
				} else {
					uni.showToast({
						title: "请重新授权登录",
						icon: "none"
					});
				}

			},

			getUser: function() {
				let that = this;
				uni.getStorage({
					key: 'userInfoMsg',
					success: function(res) {
						console.log(res.data);
					}
				});
				uni.getUserProfile({
					provider: 'weixin',
					desc: "用于完善用户信息",
					success: function(infoRes) {
						console.log('获取成功', infoRes)
						uni.setStorage({
							key: 'userInfoMsg',
							data: infoRes.userInfo,
						});
						uni.setStorageSync('storage_key', 'hello');
						that.userInfoMsg = infoRes.userInfo
					},
					fail: function(e) {
						console.log('获取失败', e)
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.contentLogin {
		width: 100%;
		height: 100vh;
		padding-top: 1rpx;

		.agree {
			color: blue;

			&::active {
				opacity: 0.8;
			}
		}

		.loginBg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
			opacity: 0.8;
		}

		.iconContent {
			text-align: center;
			margin-top: 260rpx;

			.companyName {
				font-family: PingFangJian;
			}

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.Loginbtn {
			padding: 0 40rpx;
			margin-top: 100rpx;
		}
	}
</style>